<template>
  <el-dialog title="详情页面" :visible.sync="show" width="1200px" append-to-body :before-close="close">
    <el-form ref="form" label-position="left" :model="form" label-width="140px">
      <el-divider content-position="center">确认信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="电子口岸代码">
            {{ form.eportCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收件人手机号">
            {{ form.user_phone }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收件人身份证号码">
            {{ form.declarer_id_card }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="区/县地址id">
            {{ form.area_id }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址">
            {{ form.user_address }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注">
            {{ form.remark }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item>
            <span slot="label" style="width: 160px;display: inline-block;">
              收件人身份证照片正面
            </span>
            {{ form.id_card_front_img }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <span slot="label" style="width: 160px;display: inline-block;">
              收件人身份证照片反面
            </span>
            {{ form.id_card_back_img }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button size="medium" @click="close()">关 闭</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 40%;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
  margin-bottom: 6vh !important;
}
</style>
<script>
export default {
  name: 'OrderDetails',
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    show: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },
  watch: {
    show(val) {
      if (val) {
        console.log(this.form)
      }
    }
  },
  created() {
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    }
  }
}
</script>
